<template>
  <fieldset>
    <legend>产品和商品</legend>
    <!-- {{ProductData}} -->
    <ul>
      <li v-for="(item, index) of ProductData" :key="index">
        {{ item.title }}---{{ item.price }}---{{ item.inventory }}---
        <button @click="handleClick(item)" :disabled="item.inventory===0">+加入购物车</button>
      </li>
    </ul>
  </fieldset>
</template>

<script>
import { mapState, mapActions } from "vuex";
//请求服务器
//需求一:渲染数据
//封装请求的方法
//请求要放vuex的action的里面
//请求放到vuex的action里
//vuex需要模块化,并且添加mutations
//需求二:点击加入按钮需要将产品加入到购物车中
//需求三:相同的数据添加到购物车后,需要让购物车的数量加1  产品的库存减一
//需求四:总计计算
export default {
  mounted() {
    this.FETCH_PRODUCT();
  },
  computed: {
    ...mapState("product", ["ProductData"]),
  },
  methods: {
    ...mapActions("product", ["FETCH_PRODUCT"]),
    handleClick(item) {
      //点中按钮选中的数据
      this.ADD_CART(item);
    },
    ...mapActions("cart", ["ADD_CART"]),
  },
};
</script>

<style scoped>
ul li {
  margin-top: 10px;
}
button {
  cursor: pointer;
}
</style>
